<!--
 * @Author: xiaoyan
 * @Date: 2021-09-24 17:10:25
 * @LastEditors: xiaoyan
 * @LastEditTime: 2021-09-29 15:27:12
 * @Description: login
 * @FilePath: \vue3-ts-demo\src\views\login\index.vue
-->
<template>
<div class="login-container">
    <div class="login-main">
        <div class="login-logo">
            <img class="logo" src="@/assets/login/login-logo.png" />
        </div>
        <el-form ref="ruleForm" :model="form" :rules="rules">
          <el-form-item label="" prop="username">
              <el-input class="txt" v-model="form.username" placeholder="请输入用户名" clearable prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
              <el-input class="txt" v-model="form.password" type="password" placeholder="请输入密码" clearable prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
        </el-form>
        <el-form-item label="">
            <el-button type="primary" class="login-btn" @click="submit">登录</el-button>
        </el-form-item>
    </div>
</div>
</template>
<script setup lang="ts">
import {reactive,ref} from "vue"
import { validate } from '@/utils/formExtend'
import { useStore } from '@/store'
import { ElNotification,ElMessage } from 'element-plus'
import { useRoute, LocationQuery, useRouter } from 'vue-router'
    type fromType = {
        username:string,
        password:string,
    }
    const store = useStore()
    const router = useRouter()
    const form = reactive({}) as fromType;
    const ruleForm = ref(null);
    const rules = reactive({
        username:[
            {
                validator: (rule: any, value: any, callback: (arg0?: Error|undefined) => void) => {
                    if (!value) {
                        return callback(new Error('用户名不能为空'))
                    }
                    callback()
                }, 
                trigger: 'blur' 
            }
        ],
        password:[
            {
                validator: (rule: any, value: any, callback: (arg0?: Error|undefined) => void) => {
                    if (!value) {
                        return callback(new Error('密码不能为空'))
                    }
                    callback()
                }, 
                trigger: 'blur' 
            }
        ],
    });
    //store.dispatch("LoginOut",undefined);
    const submit = async ()=>{
        if(!await validate(ruleForm)) return;
        store.dispatch("Login",form).then(res=>{
            if(res.resultCode === 0){
                ElMessage({
                    message: '欢迎回来',
                    type: 'success'
                })
                router.push({
                    path:"/cases/list"
                })
            }else{
                ElMessage({
                    message: res.resultMessage,
                    type: 'error'
                })
            }
        })
    };
</script>
<style lang="scss" scoped>
.login-container{
    height: 100%;
    background:url(~@/login/login-bg.png) center bottom #00a0c3 no-repeat;
    background-size: 100% auto;
    display: flex;
    align-items: center;
}
.login-main{
   width:300px;
   margin:0 auto;
    :deep(.el-input__inner){
        background-color: transparent;
        border-color: #FFF;
        color:#FFF;
    } 
}
.login-logo{
    margin-bottom: 20px;
    text-align: center;
}
.login-btn{
    width: 100%;
    color:#00a0c3;
    background-color: #FFF;
}
</style>